<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
  $(function(){
   $('.box').width('500px');
   var width = $('.box').width();
  //  var width = $('.box').css('width');
   $('.p').html(width);
   $('.p').css(
     {
       'fontSize':'100px',
       'color':'blue'
     }
   );

  

  console.log($('.box').offset());

  console.log($('body').scrollTop());


  $('.btn').click(function(){
    console.log($('html').scrollTop());
  });

  $('.btn1').click(function () {
    console.log($('html').scrollTop(200));
  });

  $('.btn').on('click',function(){
    alert('测试');
  })

  });
</script>
<body>
  <div class="box">

  </div>
  

  <p class="p"></p>
  <button class="btn">获取</button>
  <button class="btn1">设置</button>

</body>

<style>
  *{
    padding: 0;
    margin: 0;
  }
  .box{
    margin: 100px;
    top: 100px;
    width: 280px;
    height: 1000px;
    background-color:rgb(92, 5, 5);
  }
</style>
</html>